<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
        <canvas width="600" height="400"></canvas>
        <script>
            var myCanvas = document.querySelector("canvas");
            var ctx = myCanvas.getContext("2d");
            
            // 步骤
            // 1. 网格
            // 1.1 网格大小
            var gridSize = 20;
            // 1.2 x轴多少条线
            // var canvasHeight = myCanvas.height;
            // var canvasWidth = myCanvas.width;
            var canvasHeight = ctx.canvas.height;
            var canvasWidth = ctx.canvas.width;
            var xLineTotal = Math.floor(canvasHeight / gridSize);
            for (var i = 0; i < xLineTotal; i++) {
                ctx.beginPath();
                ctx.moveTo(0,i * gridSize + 0.5);
                ctx.lineTo(canvasWidth-gridSize,i * gridSize + 0.5);
                ctx.stroke();
            }
            

            // 1.3 y轴多少条线
            var yLineTotal = Math.floor(canvasWidth / gridSize);
            for (var i = 0; i < yLineTotal; i++) {
                ctx.beginPath();
                ctx.moveTo(i * gridSize + 0.5,0);
                ctx.lineTo(i * gridSize + 0.5 ,canvasHeight-gridSize);
                ctx.stroke();
            }

            // 2. 绘制坐标系
            var arrowSize = 20;
            // 2.1 确定原点()
            var x0 = gridSize;
            var y0 = canvasHeight - gridSize;
            // 2.2 确定距离画布旁边的距离
            //     就是gridSize
            // 2.3 绘制x轴
                ctx.beginPath();
                ctx.moveTo(x0,y0);
                ctx.lineTo(canvasWidth - gridSize,y0);
                ctx.stroke();
            // 2.4 确定箭头的大小(等腰三角形)
            // 2.5 填充箭头
                ctx.lineTo(canvasWidth - gridSize - arrowSize,y0 + arrowSize / 2);
                ctx.lineTo(canvasWidth - gridSize - arrowSize,y0 - arrowSize / 2);
                ctx.lineTo(canvasWidth - gridSize,y0);
                ctx.fill();

            // 绘制y轴
                ctx.beginPath();
                    ctx.moveTo(x0,y0);
                    ctx.lineTo(gridSize, gridSize);
                    ctx.stroke();
                // 2.4 确定箭头的大小(等腰三角形)
                // 2.5 填充箭头
                    ctx.lineTo(gridSize + arrowSize / 2,gridSize + arrowSize);
                    ctx.lineTo(gridSize - arrowSize / 2 ,gridSize + arrowSize);
                    ctx.lineTo(gridSize, gridSize);
                    ctx.fill();
            
                // 3. 绘制点 在(100,100)画一个 4px宽的正方形点
                ctx.beginPath();
                ctx.moveTo(98,98);
                ctx.lineTo(98,102);
                ctx.lineTo(102,102);
                ctx.lineTo(102,98);
                ctx.closePath();
                ctx.fill();
                ctx.stroke();
            
        </script>


    
</body>
</html>